<template>
    <div id="OrderDetails">
      <div style="width: 100%;height: 73.5px;background-color: #e91410;">
        <!--<p style="font-size: 18px;color: white;line-height: 73.5px;text-indent: 16.5px;">{{DataList.status_shipping == 0 || DataList.status_order == 0 || DataList.status_common == 1?'拼团还未成功，邀请小伙伴们都来拼团吧~':'拼团成功，请等待抽奖结果！'}}</p>-->
        <p style="font-size: 18px;color: white;line-height: 73.5px;text-indent: 16.5px;text-align: center;"v-show="DataList.status_common != 10">{{DataList.status_common == 10?'拼团成功，请等待抽奖结果！':'拼团还未成功，邀请小伙伴们都来拼团吧~'}}</p>
        <p style="font-size: 18px;color: white;line-height: 73.5px;text-indent: 16.5px;text-align: center;"v-show="DataList.status_common == 10">{{DataList.status_lottery == 2?'很遗憾，您未中奖，钱款将会在1-3个工作日内退回到您的支付账户！':DataList.status_lottery == 10?'恭喜您中奖啦，请耐心等待商家发货！':DataList.status_lottery == 0?'请等待抽奖结果！':''}}</p>
      </div>
      <div style="width: 100%;height: 14.5px;"></div>
      <div style="width: 90%;height: 85.5px;margin: 0 auto;">
        <div style="width: 85%;height: 14px;display: flex;justify-content: space-between;margin: 0 auto;">
          <!--<p>{{List[0].name}}</p>-->
          <!--<p>{{List[0].order_mobile}}</p>-->
          <p>{{DataList.name}}</p>
          <p>{{DataList.mobile}}</p>
        </div>
        <div style="margin-top: 20.5px;">
          <p style="line-height: 12.5px;">
            <i class="el-icon-tickets"></i>
            <!--<span>{{List[0].address}}</span>-->
            <span>{{DataList.address}}</span>
          </p>
        </div>
      </div>
      <div style="width: 100%;height: 20px;background-color: #f4f5f7;"></div>
      <div style="width: 90%;height: auto;margin: 0 auto;">
        <div style="display: flex;justify-content: space-between;">
          <p style="line-height: 40px;">惠万众</p>
          <p style="line-height: 40px;"v-show="DataList.status_common != 1">{{DataList.status_lottery == 2?'很遗憾，您未中奖，钱款将会在1-3个工作日内退回到您的支付账户！':DataList.status_lottery == 10?'恭喜您中奖啦，请耐心等待商家发货！':DataList.status_lottery == 0?'请等待抽奖结果！':''}}</p>
          <p style="line-height: 40px;"v-show="DataList.status_common == 1">{{DataList.status_common == 1?'您还未成团！':''}}</p>
        </div>
        <div style="width: 100%;height: 140px;display: flex;justify-content: space-between;">
          <div style="width: 110px;height: 110px;">
            <img :src="imgTitl+DataList.goods.thumb" alt=""width="100%"height="100%">
          </div>
          <div style="flex: 1;margin-left: 8px;">
            <p style="text-align: left;line-height: 25px;color: #707070; text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;">{{DataList.goods.goods_goods_title}}</p>
            <p>{{DataList.goods.goods_spec}}</p>
            <p style="text-align: left;line-height: 25px;color: #707070;">￥{{DataList.order_amount}}</p>
            <p style="text-align: left;line-height: 25px;color: #707070;">数量：{{DataList.goods.buy_num}}</p>
            <p style="display: none;width: 100px;height: 33px;border: 1px solid #c5c5c5;border-radius: 5px;float: right;text-align: center;line-height: 33px;color: #707070;">查看拼团详情</p>
          </div>
        </div>
        <div style="display: flex;justify-content: space-between;">
          <p style="line-height: 25px;">运费（快递）</p>
          <p style="line-height: 25px;">￥{{DataList.shipping_fee}}</p>
        </div>
        <div style="width: 100%;height: 1px;background-color: #ded8d8;margin-top: 10px;"></div>
        <div style="display: flex;justify-content: space-between;margin-top: 10px;">
          <!--<p style="line-height: 25px;color: #707070;opacity: 0;">总计￥{{DataList.goods.goods_gti_price*DataList.buy_num}}元</p>-->
          <p style="line-height: 25px;color: #707070;">合计：￥{{DataList.order_amount}}</p>
        </div>
        <div style="width: 100%;height: 1px;background-color: #ded8d8;margin-top: 10px;"></div>
        <div style="display: flex;justify-content: space-between;">
          <p style="line-height: 40px;">{{DataList.order_tip}}</p>
        </div>
        <div style="width: 80%;height: 52.5px; display: flex;justify-content: space-between;margin: 0 auto;display: none;">
          <div>
            <i style="line-height: 52.5px;font-size: 18px;color: black;" class="el-icon-tickets"></i>
            <span style="line-height: 52.5px;text-indent: 10px;font-size: 18px;color: black;">联系卖家</span>
          </div>
          <div>
            <i style="line-height: 52.5px;font-size: 18px;color: black;" class="el-icon-phone-outline"></i>
            <span style="line-height: 52.5px;text-indent: 10px;font-size: 18px;color: black;">电话联系</span>
          </div>
        </div>
      </div>
      <div style="width: 100%;height: 10px;background-color: #f3f4f6;"></div>
      <div style="width: 90%;margin: 0 auto;">
        <div style="width: 100%;height: 15px;"></div>
        <div>
          <p>
            <span>订单编号：{{DataList.order_sn}}</span>
          </p>
        </div>
        <div>
          <p style="line-height: 44px;">
            <span>付款时间：{{DataList.c_time*1000 | formatDate}}</span>
          </p>
        </div>
      </div>
      <!--<div style="width: 90%;margin: 0 auto;">-->
        <!--<el-button type="primary"style="float: right;margin-top: 10%;">确认收货</el-button>-->
      <!--</div>-->
    </div>
</template>

<script>
  import axios from 'axios';
  import { Loading } from 'element-ui';

  export default {
    name: 'OrderDetails',
    data(){
      return{
        imgTitl: 'http://39.96.76.3/HuiWanZhong/public/uploads/',
        Goods:[],
        List:[],
        extension_id:'',
        loadingInstance:'',
        options:'',
        order_sn2: this.$route.params.order_sn2,
        DataList:[],
        c_time:'',
      }
    },
    created () {
      this.loadingInstance = Loading.service(this.options);
      axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/team/index/getTeamOrderList', {
        params: {
          'uId':localStorage.getItem('openid'),
          'order_sn':this.order_sn2,
        },
      }).then(response =>{
        this.DataList = response.data.data.order;
        this.loadingInstance.close();
        console.log(this.DataList)
        this.Goods = this.DataList.goods
      }).catch(function (error) {
        console.log(error);
      });

    },
    methods:{
      clos(){
        this.loadingInstance.close();
      }
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      }
    },
    destroyed:function(){
      this.clos();
    }
  }
</script>

<style scoped>
   #OrderDetails{
     width: 100%;
     height: 100%;
   }
</style>
